<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box pd-30">
			<view class="ft-28 c-33 fw-800">我的银行卡（共{{ total }}张）</view>
			<view class="bank-list">
				<view class="bank-item pd-20" v-for="item in bankList" :key="item.id"
					@click.stop="goPage('/subpackage/bank/bankDetail?id=' + item.id)">
					<view class="main pd-40" :style="'background-image:url(' + item.bank_type.bg + ');'">
						<view class="flex" style="align-items: flex-start;">
							<view class="logo-box flex-center mr-20">
								<image class="logo" :src="item.bank_type.logo" mode="widthFix"></image>
							</view>
							<view class="r">
								<view class="ft-28 c-ff fw-800">{{ item.bank_type.name }}</view>
								<view class="mt-40 ft-28 c-ff fw-800 flex">
									{{ !item.isView ? '**** **** **** ' + item.bank_num.slice(-4) : item.bank_num
									}}
									<image class="wh-32 ml-12" v-if="item.isView" @tap.stop="item.isView = false"
										src="https://cdn.oss.bon-top.cn/static_bc/images/eye_open.png" />
									<image class="wh-32 ml-12" v-else @tap.stop="item.isView = true"
										src="https://cdn.oss.bon-top.cn/static_bc/images/eye_close.png" />

								</view>
							</view>
						</view>
					</view>
					<view class="b mt-20 flex-center">
						<view class="ft-24 c-66">查看银行卡</view>
						<view class="line"></view>
						<view class="ft-24 c-66" @click.stop="goPage('/subpackage/bank/editBank?id=' + item.id)">编辑银行卡
						</view>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="bankList.length == 0">暂无数据</view>
		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>

		<view class="btn_box flex-center">
			<view class="btn bd-r20" @click="goPage('/subpackage/bank/editBank')">新增银行卡</view>
		</view>
	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import navHead from '@/components/navHead.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";

const headData = reactive({
	color: '#fff',
	title: '我的银行卡'
})
const isView = ref(false)
// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

const reloadData = () => {
	total.value = 0
	bankPage.value = 1
	bankList.value = []
	bankLoading.value = true
	getBankListData()
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})

const total = ref(0)
const bankPage = ref(1)
const bankList = ref([])
const bankLoading = ref(true)
const getBankListData = () => {
	if (!bankLoading.value) {
		return
	}
	uni.showLoading()
	bankLoading.value = false
	utils
		.request(
			api.getBankList, {
			page: bankPage.value,
			pageSize: 10
		},
			"get"
		)
		.then((res) => {
			bankPage.value++
			if (res.data.items.length > 0) {
				bankList.value = bankList.value.concat(res.data.items)
				bankList.value.forEach(f => f.isView = false)
			}
			if (bankPage.value <= res.data.pageInfo.totalPage) {
				bankLoading.value = true
			}
			if (total.value == 0) {
				total.value = res.data.pageInfo.total
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	getBankListData()
})

onReachBottom(() => {
	getBankListData()
})
</script>

<style lang="scss" scoped>
.bank-list {
	margin-top: 30rpx;

	.bank-item {
		margin-top: 20rpx;
		width: 690rpx;
		background: #F8F8F8;
		border-radius: 40rpx;

		.main {
			width: 650rpx;
			height: 212rpx;
			background: #B81C22;
			border-radius: 40rpx;
			background-size: 100% 100%;

			.logo-box {
				width: 64rpx;
				height: 64rpx;
				background: #F8F8F8;
				border-radius: 50%;

				.logo {
					width: 44rpx;
					height: 44rpx;
					flex-shrink: 0;
				}
			}
		}

		.line {
			width: 2rpx;
			height: 34rpx;
			background-color: #F1F1F1;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
	}

	.bank-item:first-child {
		margin-top: 0;
	}
}

.btn_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: start;
	justify-content: flex-end;
	background-color: #F8F8F8;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		background-color: #333;
		color: #DBF046;
	}
}
</style>